<template>
  <!-- 整点秒杀 -->
  <view v-if="data.goodsList.data && data.goodsList.data.length" class="diy-sharp"
    :style="{ background: itemStyle.background, padding: `${itemStyle.paddingY * 2}rpx ${itemStyle.paddingX * 2}rpx` }">
    <view class="container" :style="{ borderRadius: `${itemStyle.borderRadius * 2}rpx` }">
      <!-- 标题栏 -->
      <view v-if="params.title.enable" class="sharp-top" :style="{ backgroundImage: `url(${params.title.bgImage})` }">
        <view class="sharp-top--left">
          <view class="sharp-image">
            <image class="image" :src="params.title.image" mode="widthFix" />
          </view>
          <template v-if="params.title.showCountdown">
            <view class="sharp-active-status" :style="{ color: itemStyle.title.cdTextColor }">
              <text>{{ params.title.countdownText }}</text>
            </view>
            <!-- 倒计时 -->
            <view v-if="data.active.status == GoodsStatusEnum.STATE_BEGIN.value" class="active-count-down">
              <count-down :date="data.active.count_down_time" separator="colon" theme="custom" :textColor="itemStyle.title.cdTextColor"
                :fontSize="24" :customNumColor="itemStyle.title.cdNumColor" :customNumBgColor="itemStyle.title.cdNumBgColor" />
            </view>
          </template>
        </view>
        <view class="sharp-top--right">
          <view class="sharp-more" :style="{ color: itemStyle.title.rightTextColor }" @click="handleNavMore()">
            <text class="sharp-more-text">{{ params.title.rightText }}</text>
            <text class="sharp-more-arrow">
              <text class="iconfont icon-arrow-right"></text>
            </text>
          </view>
        </view>
      </view>
      <!-- 商品列表 -->
      <view class="goods-list" :class="[`display-${params.display}`, `column-${params.column}` ]"
        :style="{ marginBottom: `-${itemStyle.content.itemMargin * 2}rpx`, padding: `${itemStyle.content.itemPaddingY * 2}rpx 20rpx` }">
        <view class="goods-item" v-for="(dataItm, dataIdx) in data.goodsList.data" :key="dataIdx"
          :style="{ marginBottom: `${itemStyle.content.itemMargin * 2}rpx` }" @click="handleNavDetail(dataItm.sharp_goods_id)">
          <!-- 单列商品 -->
          <template v-if="params.column == 1">
            <view class="flex">
              <!-- 商品图片 -->
              <view class="goods-item-left">
                <image :style="{ borderRadius: `${itemStyle.content.borderRadius * 2}rpx` }" class="image" :src="dataItm.goods_image" />
              </view>
              <view class="goods-item-right">
                <view class="goods-info">
                  <view v-if="inArray('goodsName', params.show)" class="goods-name"
                    :class="[ itemStyle.content.goodsNameRows == 'two' ? 'twoline-hide' : 'oneline-hide', `row-${itemStyle.goodsNameRows}` ]">
                    {{ dataItm.goods_name }}
                  </view>
                  <!-- 抢购进度 -->
                  <view class="sharp-progress">
                    <view class="yoo-progress" :style="{ background: `linear-gradient(to right, ${itemStyle.content.progressColor})` }">
                      <view class="yoo-progress--filter">
                        <view class="yoo-progress--portion" :style="{ width: `${dataItm.progress}%`,
                                    background: `linear-gradient(to right, ${itemStyle.content.progressColor})` }"></view>
                        <text class="yoo-progress--text">{{ dataItm.progress }}%</text>
                      </view>
                    </view>
                    <view class="sharp-sales oneline-hide" :style="{ color: itemStyle.content.salesColor }">已抢{{ dataItm.sales_actual }}件
                    </view>
                  </view>
                  <view class="footer">
                    <view class="goods-price oneline-hide" :style="{ color: itemStyle.content.priceColor }">
                      <template v-if="inArray('seckillPrice', params.show)">
                        <text class="unit">￥</text>
                        <text class="value">{{ dataItm.seckill_price_min }}</text>
                      </template>
                      <text v-if="inArray('originalPrice', params.show)" class="line-price">
                        <text class="unit">￥</text>
                        <text class="value">{{ dataItm.original_price }}</text>
                      </text>
                    </view>
                    <view v-show="inArray('mainBtn', params.show) && params.column < 3" class="action">
                      <view class="btn-main" :style="{ color: itemStyle.content.mainBtnTextColor,
                                  background: `linear-gradient(to right, ${itemStyle.content.mainBtnBgColor})` }">
                        <text>{{ params.mainBtnText }}</text>
                      </view>
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </template>
          <!-- 两列/三列 -->
          <template v-else>
            <view class="goods-image" :style="{ borderRadius: `${itemStyle.content.borderRadius * 2}rpx` }">
              <image class="image" :src="dataItm.goods_image" />
            </view>
            <view class="goods-info">
              <view v-if="inArray('goodsName', params.show)" class="goods-name"
                :class="[ itemStyle.content.goodsNameRows == 'two' ? 'twoline-hide' : 'oneline-hide', `row-${itemStyle.goodsNameRows}` ]">
                {{ dataItm.goods_name }}
              </view>
              <view v-if="inArray('sellingPoint', params.show)" class="goods-selling">
                <text class="selling oneline-hide" :style="{ color: itemStyle.sellingColor }">{{ dataItm.selling_point }}</text>
              </view>
              <view v-if="inArray('goodsSales', params.show)" class="goods-sales oneline-hide">
                <text class="sales">已售{{ dataItm.goods_sales }}</text>
              </view>
              <view class="footer">
                <view v-if="inArray('seckillPrice', params.show)" class="goods-price oneline-hide" :style="{ color: itemStyle.priceColor }">
                  <text class="unit">￥</text>
                  <text class="value">{{ dataItm.seckill_price_min }}</text>
                  <text v-if="inArray('originalPrice', params.show)" class="line-price">
                    <text class="unit">￥</text>
                    <text class="value">{{ dataItm.original_price }}</text>
                  </text>
                </view>
              </view>
            </view>
          </template>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import { inArray } from '@/utils/util'
  import CountDown from '@/components/countdown'
  import { ActiveStatusEnum, GoodsStatusEnum } from '@/common/enum/sharp'
  import mixin from '../mixin'

  export default {
    components: {
      CountDown
    },
    mixins: [mixin],
    props: {
      itemIndex: String,
      itemStyle: Object,
      params: Object,
      data: Object
    },
    data() {
      return {
        // 枚举类
        ActiveStatusEnum,
        GoodsStatusEnum,
        // 公共函数
        inArray
      }
    },
    methods: {

      // 跳转到秒杀会场页
      handleNavMore() {
        this.$navTo('pages/sharp/index')
      },

      // 跳转到秒杀商品详情页
      handleNavDetail(sharpGoodsId) {
        const { data } = this
        this.$navTo('pages/sharp/goods/index', {
          activeTimeId: data.active.active_time_id,
          sharpGoodsId
        })
      }

    }

  }
</script>

<style lang="scss" scoped>
  // 整点秒杀
  .diy-sharp {
    // 解决 margin-bottom: -20rpx 导致的容器异常
    display: flex;
    flex-direction: column;

    .container {
      background-color: #fff;
      overflow: hidden;
    }

    .sharp-top {
      display: flex;
      align-items: center;
      height: 96rpx;
      padding: 0 24rpx;
      background-repeat: no-repeat;
      background-size: 100% 100%;

      .sharp-top--left {
        flex: 1;
        display: flex;
        align-items: center;
      }

      .sharp-image {
        // margin-right: 12rpx;

        .image {
          display: block;
          width: 164rpx;
        }
      }

      .sharp-active-status {
        color: #fff;
        font-size: 26rpx;
        margin-left: 40rpx;
        margin-right: 16rpx;
      }

      // 更多
      .sharp-more {
        display: flex;
        align-items: center;
        color: #fff;
        font-size: 26rpx;
        padding: 30rpx 0 30rpx 30rpx;

        .sharp-more-arrow {
          font-size: 24rpx;
        }
      }
    }

    // 商品列表
    .goods-list {
      margin-bottom: -20rpx;
      padding: 20rpx;

      // 横向滑动
      &.display-slide {
        display: flex;
        flex-wrap: nowrap;
        overflow: hidden;

        .goods-item {
          flex-shrink: 0;
          margin-right: 2.8% !important;
        }

        // 双列
        &.column-2 {
          .goods-item {
            flex-basis: 45.6%;
          }
        }

        // 3列
        &.column-3 {
          .goods-item {
            flex-basis: 29.46666%;
          }
        }
      }

      // 列表平铺
      &.display-list {
        display: flex;
        flex-wrap: wrap;
      }

      // 单列
      &.column-1 {
        margin-bottom: 0 !important;

        .goods-item {
          margin-bottom: 12rpx;
          // padding: 20rpx;
          box-sizing: border-box;
          background: #fff;
          flex-basis: 100%;
          margin-right: 0;

          &:last-child {
            margin-bottom: 0 !important;
          }

          .goods-info {
            padding: 0;

            .footer {
              position: absolute;
              bottom: 4rpx;
              width: 100%;
            }
          }
        }

        // 商品图片
        .goods-item-left {
          background: #fff;
          margin-right: 20rpx;

          .image {
            display: block;
            width: 240rpx;
            height: 240rpx;
          }
        }

        .goods-item-right {
          position: relative;
          flex: 1;
          width: 0; // 解决文字超出无法隐藏
        }

      }

      // 2列
      &.column-2 {
        .goods-item {
          flex-basis: 48.6%;

          &:nth-child(2n) {
            margin-right: 0;
          }
        }
      }

      // 3列
      &.column-3 {
        .goods-item {
          flex-basis: 31.46666%;

          &:nth-child(3n) {
            margin-right: 0;
          }
        }

        .goods-name {
          font-size: 26rpx !important;
        }
      }

      // 商品内容
      .goods-item {
        flex-shrink: 0;
        background-color: #fff;
        flex: 0 1 48.6%;
        margin-right: 2.8%;
        // border-radius: 16rpx;
        overflow: hidden;
        margin-bottom: 20rpx;

        .goods-image {
          position: relative;
          width: 100%;
          height: 0;
          padding-bottom: 100%;
          overflow: hidden;

          &:after {
            content: '';
            display: block;
            margin-top: 100%;
          }

          .image {
            position: absolute;
            top: 0;
            left: 0;
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }

        .goods-info {
          // padding: 20rpx;
          padding: 6rpx 10rpx;

          .goods-name {
            font-size: 27rpx;
            color: #000;
            margin-bottom: 8rpx;
            // line-height: 1.3; // 用户端

            &.row-two {
              // min-height: 68rpx; // 用户端
            }
          }

          .goods-selling {
            display: flex; // 解决文字超出无法隐藏
            font-size: 24rpx;
            margin-bottom: 8rpx;
            min-height: 34rpx;
          }

          .goods-sales {
            font-size: 24rpx;
            color: #959595;
            margin-bottom: 8rpx;

            .line {
              margin: 0 8rpx;
            }
          }

        }

        .footer {
          display: flex;
          justify-content: space-between;
          align-items: center;

          .goods-price {
            position: relative;
            color: #ff1051;

            .unit {
              font-size: 20rpx;
            }

            .value {
              font-size: 32rpx;
            }

            .unit2 {
              margin-left: 4rpx;
              font-size: 22rpx;
            }

            .line-price {
              margin-left: 6rpx;
              color: #959595;

              .unit {
                text-decoration: line-through;
                font-size: 22rpx;
              }

              .value {
                text-decoration: line-through;
                font-size: 22rpx;
              }
            }

          }

          .action {
            .btn-main {
              max-width: 156rpx;
              overflow: hidden;
              color: #fff;
              font-size: 26rpx;
              border-radius: 30rpx;
              padding: 10rpx 26rpx;
              white-space: nowrap;
            }
          }

        }

      }

      // 抢购进度
      .sharp-progress {
        display: flex;
        align-items: center;
        margin-top: 32rpx;

        .yoo-progress {
          width: 70%;
          height: 28rpx;
          border-radius: 12rpx;
          overflow: hidden;
          // background: linear-gradient(to right, var(--bg-color1), var(--bg-color2));

          &--filter {
            position: relative;
            background-color: hsla(0, 0%, 100%, .7);
            width: 100%;
            height: 100%;
          }

          &--portion {
            width: 0%;
            height: 100%;
            border-radius: 12rpx;
            // background: linear-gradient(to right, var(--bg-color1), var(--bg-color2));
          }

          &--text {
            color: #fff;
            font-size: 24rpx;
            // line-height: 1.6;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
          }
        }

        // 秒杀商品销量
        .sharp-sales {
          margin-left: 30rpx;
          font-size: 24rpx;
          color: #fa2209;
          white-space: nowrap;
          max-width: 136rpx;
          flex-shrink: 0;
        }
      }

    }
  }
</style>